<template>
	<view class="content">
		<view class="swiper-box">
			<swiper class="swiper" :current="index" :circular="true" :autoplay="false" :interval="3000" :duration="500"
				@change="changeSwiper">
				<swiper-item v-if="list" v-for="(item, index) in list" :key="index">
					<view class="swiper-item">
						<image :src="item.pic" class="swiper-image" v-if="!playVideo"></image>
						<view class="swiper-video-box" v-else>
							<video class="swiper-video-box_video"
								:src="videoSrc"
								:initial-time="initialTime"
								:muted="true" :autoplay="true" :duration="videoPlayTime" :show-center-play-btn="false"
								:enable-progress-gesture="false" :show-mute-btn="true" controls
								@timeupdate="videoUpdate"></video>
							<view class="swiper-video-box_control">
								<view class="swiper-video-box_control_stop-btn" @tap="playVideo = false">
									<text style="font-size: 26rpx;">退出播放</text>
								</view>
							</view>
						</view>
					</view>
				</swiper-item>
			</swiper>
			<view v-if="!playVideo">
				<!-- 轮播指示点 -->
				<view class="swiper-dot">
					<text>{{ index+1 }}</text>
					<view style="font-size: 20rpx;position: relative;top: 3rpx;">
						<text>/</text>
						<text style="position: relative;top: 3rpx;">{{ list.length }}</text>
					</view>
				</view>
				<!-- 视频播放按钮 -->
				<view class="swiper-video-play-box">
					<view class="swiper-video-play" @tap="playVideo = true">
						<view class="swiper-video-play_play-btn">
							<view class="swiper-video-play_play-btn_icons"></view>
						</view>
						<view style="font-size: 26rpx;margin-right: 30rpx;">
							<text>00:{{videoPlayTime}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="min-height: 3000rpx;padding: 0 30rpx;">
			<view style="margin: 100rpx 0;color: rgba(0, 0, 0, 0.8);">
				<text>视频播放时，上下滚动页面可看到小窗播放效果哦！</text>
			</view>
			<!-- <image class="logo" src="/static/logo.png"></image>
			<view class="text-area">
				<text class="title">{{title}}</text>
			</view> -->
		</view>
		<!-- 视频小窗 -->
		<view class="video-small-widget" v-if="videoSmallPlay">
			<video class="video-small-widget_video" :autoplay="true" :initial-time="initialTime" :src="videoSrc" controls @timeupdate="videoUpdate"></video>
		</view>
	</view>
</template>

<script>
	/**
	 * @description 轮播图视频播放演示，是仿京东小程序商品详情的轮播视频播放效果，自己又加了一个滚动页面视频小窗播放的效果，给大家提供一个实现思路，大家可以在此基础上进行扩展其他内容。有一个小问题就是轮播视频静音播放问题，这个大家在体验过程会发现默认静音按钮的小问题，其实可以自定义视频控制条解决，这里我就不这么做了，仅作为演示而已。小程序appid的话自己可以创建一个小程序体验版，个人可以免费创建的，具体可自行查阅小程序开发文档。
	 * 说明：视频来源采集自个人基于网易开源API项目的fork项目，目前托管在vercel平台，后面有计划基于该API做一个没有账户登录系统的音乐播放娱乐软件。
	 * 		项目地址：https://netease-cloud-music-api-wheat-seven.vercel.app
	 * 		vercel地址：https://vercel.com
	 */
	export default {
		data() {
			return {
				list: null, // 轮播图
				index: 0, // 轮播当前索引
				playVideo: false, // 是否播放视频
				videoPlayTime: 60 ,// 视频播放长度，单位:s 播放时间格式这块大家可以自定义，此处仅作为演示
				videoSrc: "http://183.146.2.119:21795/fseeca82d4.a.bdydns.com/1924164272/cloudmusic/ae2c/core/cdbc/599e1a6ef37930c119293beaf34368ae.mp4?slefreq=1&wsSecret=4e2e833da9642ad061db8a24a85d2ba0&wsTime=1631973510&f_ver=v1&http_cdnfrom=bdcloud&max_age=31104000&r=Dh9BOGJEGhJZKhssVhMCMhZTGz43DxtVBHheJVYeWSUKBEAsNR5GDVVhES4BCVklCRlQZzsPVwcZe0lyVlsXcAMNBn9hWAUHB39JeQpZFCMHDQZ8a10NBVNgHTsHVQUqAw1HLSlWBEJBPSMuUBgTMltfUHo9UwZXUi9JfQdYFyJWXQQsOlNUVgIvSH5XWBQnVk1COwwCWAELf0Z4AlNBdVNaBQkbUCY7D1tVWT4VJVAOGHc%3D&MqD7sp=i5aSmpCKi8LOyczLysnKysrG2ZyXmpyUws7Hzc7MzcvNx8jZkZCbmpOJk8LO2Yycipabwo-axrCxpry8u46qjoqFs7O3yZ6Z2ZyTjIuQwszZhpmQj4vCzsjZhpmbjI-Lws7JzM7GyMzKysbOyMrZl56Ml8Kdm4abkYygns2axpqdyM6byZzIysjKmceaycjNy8iczsecyc-bnpzNzJvMzp7KmdmNmo6Mj5vCzc3P2YaZj42Wws7Pzw~~&UYs5cp=hpmMlJaPws7ZhpmNmo6Wm8K-so-Tm5a6l6q-qqeIi4W-vr3ZhpmLi8LMz9mGmZeQjIvCzsfM0c7My9HGzdHOzM3ZhpmLlpKaws7JzM7GyMzKysbNzc3Zhpmcm5GQj4vCzw~~&sent_http_access-control-allow-credentials=true&sent_http_cdn-user-ip=124.79.245.41&sent_http_cdn-ip=60.190.116.35&sent_http_cache=state&sent_http_access-control-expose-headers=Content-Range%2C%20Last-Modified&sent_http_cdn-source=bdcloud&sent_http_access-control-allow-headers=DNT%2CX-CustomHeader%2CKeep-Alive%2CUser-Agent%2CX-Requested-With%2CIf-Modified-Since%2CCache-Control%2CContent-Type%2CRange&sent_http_access-control-allow-origin=*&sent_http_access-control-allow-methods=GET%2CPOST%2COPTIONS",
				videoSmallPlay: false ,// 视频小窗播放
				initialTime: 0 // 视频播放位置，用于小窗继续播放
			}
		},
		onLoad() {
			this.getData();
		},
		onPageScroll(e) {
			if (this.playVideo && e.scrollTop > 385) {
				this.videoSmallPlay = true;
				this.playVideo = false;
			}
			if (this.videoSmallPlay && e.scrollTop <= 385) {
				this.videoSmallPlay = false;
				this.playVideo = true;
			}
		},
		methods: {
			changeSwiper(e) {
				this.playVideo = false;
				this.index = e.detail.current;
			},
			getData() {
				uni.request({
					url: 'https://netease-cloud-music-api.kviewui.icu/banner?type=1',
					method: 'GET',
					data: {},
					success: res => {
						this.list = res.data.banners.slice(0, 5);
						console.log(this.list);
					},
					fail: () => {},
					complete: () => {}
				});
			},
			videoUpdate(e) {
				// 监听视频播放进度，根据设置的播放长度强制暂停视频播放
				if (e.detail.currentTime >= this.videoPlayTime) {
					this.playVideo = false;
				} else {
					// 记录视频播放位置，用户小窗继续播放
					this.initialTime = e.detail.currentTime;
				}
			}
		}
	}
</script>

<style>
	.swiper-box {
		display: flex;
		flex: 1;
		flex-direction: column;
		position: relative;
		overflow: hidden;
	}

	.swiper {
		width: 750rpx;
		height: 840rpx;
	}

	.swiper-image {
		width: 750rpx;
		height: 840rpx;
	}

	.swiper-video-box {
		width: 750rpx;
		height: 840rpx;
	}

	.swiper-video-box_video {
		width: 750rpx;
		height: 760rpx;
	}

	.swiper-video-box_control {
		width: 750rpx;
		height: 80rpx;
		background-color: rgba(0, 0, 0, 1);
		position: relative;
		bottom: 10rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.swiper-video-box_control_stop-btn {
		width: 180rpx;
		height: 54rpx;
		background-color: #D2D2D2;
		border-radius: 60rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.swiper-dot {
		width: 100rpx;
		height: 46rpx;
		background-color: rgba(0, 0, 0, 0.3);
		border-top-left-radius: 50rpx;
		border-bottom-left-radius: 50rpx;
		position: absolute;
		bottom: 40rpx;
		/* left: 0; */
		right: 0;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: rgba(255, 255, 255, 0.8);
		font-size: 32rpx;
	}

	.swiper-video-play-box {
		width: 750rpx;
		height: 60rpx;
		/* background-color: rgba(0, 0, 255, 0.2); */
		position: absolute;
		bottom: 40rpx;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
	}

	.swiper-video-play {
		width: 200rpx;
		height: 60rpx;
		border-radius: 60rpx;
		background-color: rgba(255, 255, 255, 0.8);
		display: flex;
		/* flex: 1; */
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.swiper-video-play_play-btn {
		font-size: 28rpx;
		width: 50rpx;
		height: 50rpx;
		border-radius: 100%;
		background-color: #FD5451;
		margin-left: 8rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}

	.swiper-video-play_play-btn_icons {
		width: 0;
		height: 0;
		border-style: solid;
		border-width: 5px 0 5px 8px;
		border-color: transparent transparent transparent #ffffff;
		position: relative;
		left: 4rpx;
	}
	
	.video-small-widget {
		width: 250rpx;
		height: 250rpx;
		background-color: rgba(0, 0, 0, 1);
		position: fixed;
		bottom: 100rpx;
		right: 0;
	}
	
	.video-small-widget_video {
		width: 100%;
		height: 100%;
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
</style>
